<template>
  <div class="all">
    <div style="position: sticky; top: 0; z-index: 9999" class="header" v-show="!showNav">
      <span @click="back()" class="fanhui">
        <img src="../../../assets/返回.png" alt="" />
        <span class="sides">返回</span>
      </span>
      <van-search
        v-model="searchValue"
        shape="round"
        placeholder="请输入搜索关键词"
        left-icon=""
        show-action
        @keyup="onSearch"
        @clear="onSearch"
      >
        <template #left-icon>
          <div @click="onSearch">
            <van-icon name="search" />
          </div>
        </template>
        <template #action> </template>
      </van-search>
      <span></span>
    </div>
    <div class="content">
      <van-tabs
        sticky
        offset-top="12vw"
        v-model="active"
        swipeable
        animated
        color="#1da4f2"
        title-active-color="#1da4f2"
        line-width="40px"
        line-height="2px"
        @change="onchange"
        @click="onClick"
      >
        <!-- 全部横列表 -->
        <van-tab
          v-for="(item, index) in khTabList"
          :key="index"
          :title="item.name"
          :name="item.id"
        >
<!--          // topActive == 3-->
<!--            // ? tabList-->
<!--            // : topActive == 0 || topActive == 1 || topActive == 2-->
<!--            // ? khTabList-->
<!--            // : tabList1"-->
          <!-- 空数据占位符 -->
          <van-empty
            style="width: 100%; height: 60%"
            v-show="orderList.length <= 0 && isLoading === false"
            class="custom-image"
            :image="require('../../../assets/空两本书.png')"
            :description="nullOrderText"
          />
          <!-- box数据 -->
          <div>
            <!-- 红色 医生订单 71-388注释 不显示-->
<!--            <div
              class="box"
              v-show="topActive !== 0 && topActive !== 1 && topActive !== 3"
              v-for="(item, index) in orderList"
              :key="index"
              @click="clickBox(item)"
            >
              &lt;!&ndash; 每一个订单的头部 &ndash;&gt;
              <div class="boxTop">
                <div class="boxTop_left">
                  <img
                    v-if="
                      item.patientPhoto !== null &&
                      item.patientPhoto !== undefined &&
                      item.patientPhoto !== ''
                    "
                    class="photo"
                    :src="item.patientPhoto"
                    alt=""
                  />
                  <img
                    v-else
                    class="photo"
                    src="../../assets/女患者@2x.png"
                    alt=""
                  />
                  <a>{{ item.name }}
                    &nbsp;
                    <a v-show="item.SEX == 1">男</a>
                    <a v-show="item.SEX == 2">女</a>
                    &nbsp;
                    {{ item.age }}岁
                    <button v-show="item.team_id" class="tagTuandui">
                      团队
                    </button>
                  </a>
                </div>
                <div class="boxTop_right blue">
                  &lt;!&ndash;                  视频&ndash;&gt;
                  <span
                    class="red"
                    v-show="
                      item.status == 2 && (item.type == 2 || item.type == 5)
                    "
                  >待接单</span
                  >
                  <span
                    class="green"
                    v-show="item.status == 3 && item.type == 5"
                  >待接诊</span
                  >
                  <span
                    class="green"
                    v-show="
                      item.status == 3 && item.type == 2 && item.is_signin == 1
                    "
                  >待接诊</span
                  >
                  <span
                    class="green"
                    v-show="
                      item.status == 3 && item.type == 2 && item.is_signin == 0
                    "
                  >预约已确认</span
                  >

                  &lt;!&ndash;                  图文&ndash;&gt;
                  <span
                    v-show="
                      item.status == 2 &&
                      item.type == 1 &&
                      (item.book_status == null || item.book_status == 3)
                    "
                  >待预约</span
                  >
                  <span class="red" v-show="item.status == 3 && item.type == 1"
                  >待接诊</span
                  >
                  <span class="green" v-show="item.status == 4"
                  >{{ typeLabel }}中</span
                  >
                  <span v-show="item.status == 5">已结束</span>
                  <span v-show="item.status == 6" class="black">已退诊</span>
                </div>
              </div>
              <div class="boxContent">
                <div class="boxContent_text">
                  <span style="white-space: nowrap">自述情况：</span>
                  <span
                    style="
                      width: 80%;
                      display: block;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      -webkit-line-clamp: 2;
                      word-break: break-all;
                      -webkit-box-orient: vertical;
                      display: -webkit-box;
                    "
                  >{{ item.illness_desc }}</span
                  >
                </div>
              </div>
              <div class="boxContent_bottom">
                <div class="time">
                  &lt;!&ndash;                  视频&ndash;&gt;
                  <p
                    v-show="
                      (item.status == 2 || item.status == 3) &&
                      (item.type == 2 || item.type == 5)
                    "
                  >
                    申请时间：{{ item.created_at }}
                  </p>

                  <p v-show="item.status == 2 && item.type == 2">
                    预约{{ typeLabel }}时间：{{ item.book_date }}
                    {{ item.book_time_start }} ~ {{ item.book_time_end }}
                  </p>

                  <p
                    v-show="(item.status == 2 || item.status == 3) && type == 5"
                  >
                    预约{{ typeLabel }}时间：{{ item.book_date }}
                    {{ item.book_time_start }} ~ {{ item.book_time_end }}
                  </p>

                  <p v-show="item.status == 3 && item.type == 2">
                    {{ typeLabel }}时间：{{ item.book_date }}
                    {{ item.book_time_start }} ~ {{ item.book_time_end }}
                  </p>
                  <p v-show="item.status == 6 && item.cancel_type !== 3">
                    订单取消原因：
                    <a v-show="item.cancel_type == 1">手工操作</a>
                    <a
                      v-show="
                        item.cancel_type == 2 && item.refund_status == null
                      "
                    >支付超时</a
                    >
                    <a
                      v-show="
                        item.cancel_type == 2 && item.refund_status !== null
                      "
                    >接诊超时</a
                    >
                    <a v-show="item.cancel_type == 4">{{
                        item.cancel_reason
                      }}</a>
                    &lt;!&ndash;                  '取消类型 1:患者手动;2:系统自动;3:医生拒诊'&ndash;&gt;
                  </p>
                  &lt;!&ndash;                  图文&ndash;&gt;
                  <p
                    v-show="
                      (item.status == 1 || item.status == 3) && item.type == 1
                    "
                  >
                    申请时间：{{ item.created_at }}
                  </p>
                  <p v-show="item.status == 4 || item.status == 5">
                    开始{{ typeLabel }}时间：{{ item.start_time }}
                  </p>
                  <p v-show="item.status == 5">
                    结束{{ typeLabel }}时间：{{ item.end_time }}
                  </p>
                  <p v-show="item.status == 4">
                    已{{ typeLabel }}：{{
                      GetDateDiff(new Date() - new Date(item.start_time))
                    }}
                  </p>
                  <p v-show="item.status == 6">
                    订单取消时间：{{ item.cancel_time }}
                  </p>
                  <p v-show="item.cancel_type == 3">
                    退诊原因：{{ item.cancel_reason }}
                  </p>
                </div>
              </div>
              <div class="price">
                <span>订单金额：</span>
                <span>￥{{ item.amount }}</span>
              </div>
              <div class="boxBottom">
                <div class="">
                  &lt;!&ndash;                 待接诊 &ndash;&gt;
                  <span
                    class="qianDao"
                    v-show="
                      item.status == 3 && item.type == 2 && item.is_signin == 0
                    "
                  >
                    <img
                      style="width: 15px; height: 15px"
                      src="../../assets/未签到.png"
                      alt=""
                    />
                    未签到
                  </span>

                  &lt;!&ndash;               带接诊已确认 &ndash;&gt;
                  <span
                    class="qianDao"
                    v-show="
                      item.status == 3 && item.type == 2 && item.is_signin == 1
                    "
                  >
                    <img
                      style="width: 15px; height: 15px"
                      src="../../assets/已签到.png"
                      alt=""
                    />
                    <a style="color: #1da4f2">
                      已签到 ({{ formatDate(item.signin_time) }})
                    </a>
                  </span>
                </div>
                <div style="display: flex">
                  &lt;!&ndash;                 视频&ndash;&gt;
                  <button
                    class="box_button btnBlack"
                    @click.stop="yuYueCancel(item)"
                    v-show="
                      item.status == 2 && (item.type == 5 || item.type == 2)
                    "
                  >
                    取消预约
                  </button>
                  <button
                    class="box_button btnBule"
                    @click.stop="yuYueconfirm(item)"
                    v-show="
                      item.status == 2 && (item.type == 5 || item.type == 2)
                    "
                  >
                    确认预约
                  </button>
                  <button
                    class="box_button btnBule"
                    @click.stop="jieZhen(item)"
                    v-show="
                      item.status == 3 && item.type == 2 && item.is_signin == 1
                    "
                  >
                    接诊
                  </button>
                  <button
                    class="box_button btnBlack"
                    v-show="
                      item.status == 3 && (item.type == 2 || item.type == 5)
                    "
                    @click.stop="juZhen(item)"
                  >
                    退诊
                  </button>
                  &lt;!&ndash;图文&ndash;&gt;
                  <button
                    class="box_button btnBlack"
                    @click.stop="guoCheng(item)"
                    v-show="item.status == 5"
                  >
                    {{ typeLabel }}记录
                  </button>
                  <button
                    class="box_button btnBlack"
                    @click.stop="xiuGai(item)"
                    v-show="
                      item.status == 5 &&
                      item.is_advice_edit == 1 &&
                      item.type !== 5
                    "
                  >
                    修改咨询结果
                  </button>
                  <button
                    class="box_button btnBlack"
                    @click.stop="xiuGai(item)"
                    v-show="
                      item.status == 5 &&
                      item.is_advice_edit == 1 &&
                      item.type == 5 &&
                      item.doc_user_id == userid
                    "
                  >
                    修改会诊结果
                  </button>
                  <button
                    class="box_button btnBule"
                    @click.stop="jieZhen(item)"
                    v-show="item.status == 3 && item.type == 1"
                  >
                    接诊
                  </button>
                  <button
                    class="box_button btnBlack"
                    @click.stop="juZhen(item)"
                    v-show="item.status == 3 && item.type == 1"
                  >
                    退诊
                  </button>

                  <button
                    class="box_button btnBlack"
                    @click.stop="jumpZixun(item)"
                    v-show="item.status == 4 && item.type == 1"
                  >
                    继续{{ typeLabel }}
                  </button>
                  <button
                    class="box_button btnBlack"
                    @click.stop="jieshuWenzhen(item)"
                    v-show="item.status == 4"
                  >
                    结束{{ typeLabel }}
                  </button>
                </div>
              </div>
            </div>-->
            <!-- 蓝色 康复 护理订单 389-531 显示 -->
            <!-- orderlist 订单列表 orditem 每一个订单 -->
            <div
              class="KHbox"
              v-for="(Orditem, Ordindex) in orderList"
              :key="Ordindex"
            >
              <!-- 订单头像 和名称 -->
              <div class="orderTop">
                <span class="orderLeft">
                  <a class="typeName" >
                  {{Orditem.TYPE == 3 ? '康' :
                    Orditem.TYPE == 4 ? '护':
                      Orditem.TYPE == 7 ? '生':
                        Orditem.TYPE == 8 ? '养':
                          ''
                      }}
                  </a>
                  {{ Orditem.ITEM_NAME }}
                </span>
                <!-- 订单状态  405-466-->
                <span
                  class="statusSpan"
                  v-show="
                    Orditem.STATUS == 2 &&
                    Orditem.FINISH == 0 &&
                    Orditem.CONFIRM == 0 &&
                    Orditem.APPRAISE_STATUS == 0
                  "
                >已完成</span
                >
                <span
                  class="statusSpan"
                  v-show="Orditem.STATUS == 4 && Orditem.REFUND == 2"
                >订单已取消,退款中</span
                >
                <span
                  class="statusSpan"
                  v-show="Orditem.STATUS == 4 && Orditem.REFUND == 3"
                >订单已取消,退款成功</span
                >
                <span
                  class="statusSpan"
                  v-show="Orditem.STATUS == 4 && Orditem.REFUND == 4"
                >订单已取消,退款失败</span
                >
                <span
                  class="statusSpan"
                  v-show="Orditem.STATUS == 3 || Orditem.STATUS == 5"
                >订单已取消</span
                >

                <span class="statusSpan" v-show="Orditem.STATUS == 1"
                >待支付</span
                >
                <span
                  class="statusSpan"
                  v-show="Orditem.STATUS == 2 && Orditem.CONFIRM == 1"
                >待接单</span
                >
                <span
                  class="statusSpan"
                  v-if="Orditem.STATUS == 2 && Orditem.START_TIME"
                >服务中</span
                >
                <span
                  class="statusSpan"
                  v-else-if="
                    Orditem.STATUS == 2 &&
                    Orditem.FINISH == 1 &&
                    Orditem.CONFIRM == 0
                  "
                >待服务</span
                >
                <span
                  class="statusSpan"
                  v-show="
                    Orditem.STATUS == 2 &&
                    Orditem.FINISH == 0 &&
                    Orditem.CONFIRM == 0 &&
                    Orditem.APPRAISE_STATUS == 1
                  "
                >待评价</span>
              </div>
              <!-- 订单具体信息 466-490-->
              <ul class="orderUl">
                <li v-for="(item, index) in ulList" :key="index">
                  <img :src="item.img" class="tubiao" alt="" />
                  <span
                    v-if="
                      Orditem.STATUS == 1 ||
                      (Orditem.STATUS == 2 && Orditem.CONFIRM == 1)
                    "
                  >{{ item.name1 }}</span
                  >
                  <span v-else>{{ item.name }}</span>
                  <span
                    :style="[
                      item.forName === 'REAL_AMOUNT'
                        ? { color: '#E3170D' }
                        : '',
                    ]"
                  ><span v-show="item.forName === 'REAL_AMOUNT'">￥</span>
                    {{ Orditem[item.forName] }}</span
                  >
                </li>
              </ul>
              <!-- 订单底部空格 491-534-->
              <div class="orderBottom">
                <button
                  @click="khJiedan(Orditem)"
                  v-show="
                    Orditem.STATUS == 1 ||
                    (Orditem.STATUS == 2 && Orditem.CONFIRM == 1)
                  "
                  class="blue"
                >
                  立即接单
                </button>
                <button
                  @click="khJujue(Orditem)"
                  v-show="
                    Orditem.STATUS == 1 ||
                    (Orditem.STATUS == 2 && Orditem.CONFIRM == 1)
                  "
                >
                  拒绝
                </button>
                <button
                  @click="khEnd(Orditem)"
                  v-if="
                    Orditem.STATUS == 2 &&
                    Orditem.START_TIME &&
                    !Orditem.END_TIME
                  "
                >
                  结束服务
                </button>
                <button
                  @click="khStart(Orditem)"
                  v-else-if="
                    Orditem.STATUS == 2 &&
                    Orditem.FINISH == 1 &&
                    Orditem.CONFIRM == 0 &&
                    !Orditem.START_TIME
                  "
                  class="blue"
                >
                  开始服务
                </button>
              </div>

            </div>
          </div>
          <!-- 加载中 -->
          <div
            style="
              width: 100%;
              height: 50vh;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            v-show="isLoading"
          >
            <van-loading size="24px" type="spinner" color="#1989fa"
            >加载中...</van-loading
            >
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 弹窗提示 不显示556-668 -->
    <van-dialog
      v-model="jiezhenShow"
      width="80%"
      confirm-button-color="#1da4f2"
      :title="`确认接受此次` + typeLabel + `吗`"
      @confirm="jiezhenConfirm()"
      show-cancel-button
    >
    </van-dialog>
    <van-dialog
      v-model="closeShow"
      width="80%"
      confirm-button-color="#1da4f2"
      :title="`确认结束此次` + typeLabel + `吗？`"
      @confirm="closeConfirm()"
      show-cancel-button
    >
    </van-dialog>
    <van-dialog
      v-model="juZhenShow"
      width="80%"
      class="juzhen"
      confirm-button-color="#1da4f2"
      title="填写退诊原因"
      @confirm="jujueConfirm()"
      @cancel="cancel_reason = ''"
      show-cancel-button
    >
      <template #default>
        <textarea
          placeholder="请填写退诊原因~"
          v-model="cancel_reason"
          name=""
          id=""
          cols="30"
          class="juZhenInp"
          rows="10"
        ></textarea>
      </template>
    </van-dialog>
    <van-dialog
      v-model="yuYueconfirmShow"
      width="80%"
      confirm-button-color="#1da4f2"
      title="确认接受此次预约吗？"
      @confirm="yuYueconfirmConfirm()"
      show-cancel-button
    >
    </van-dialog>
    <van-dialog
      v-model="yuYueCancelShow"
      width="80%"
      confirm-button-color="#1da4f2"
      title="确认取消此次预约吗？"
      @confirm="yuYueCancelConfirm()"
      @cancel="cancel_reason = ''"
      show-cancel-button
    >
      <template #default>
        <textarea
          placeholder="请填写取消预约原因~"
          v-model="cancel_reason"
          name=""
          cols="30"
          class="juZhenInp"
          rows="10"
        ></textarea>
      </template>
    </van-dialog>

    <!--     居家-->
    <van-dialog
      v-model="khJiedanShow"
      width="80%"
      confirm-button-color="#1da4f2"
      title="确认立即接单吗？"
      @confirm="khJiedanConfirm()"
      @cancel="khJiedanShow = false"
      show-cancel-button
    >
    </van-dialog>
    <van-dialog
      v-model="khJujueShow"
      width="80%"
      confirm-button-color="#1da4f2"
      title="确认拒绝此订单吗？"
      @confirm="khJujueConfirm()"
      @cancel="khJujueShow = false"
      show-cancel-button
    >
    </van-dialog>
    <van-dialog
      v-model="khStartShow"
      width="80%"
      confirm-button-color="#1da4f2"
      title="确认开始服务吗？"
      @confirm="khStartConfirm()"
      @cancel="khStartShow = false"
      show-cancel-button
    >
    </van-dialog>
    <van-dialog
      v-model="khEndShow"
      width="80%"
      confirm-button-color="#1da4f2"
      title="确认结束服务吗？"
      @confirm="khEndConfirm()"
      @cancel="khEndShow = false"
      show-cancel-button
    >
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'DocOrderJujia',
  data () {
    return {
      // 蓝色菜单
      // modelMenu: [
      //   {
      //     name: '居家康复',
      //     index: 0,
      //     type: 0
      //   },
      //   {
      //     name: '居家护理',
      //     index: 1,
      //     type: 1
      //   }
      //   // {
      //   //   name: '居家生活',
      //   //   index: 2,
      //   //   type: 0,
      //   // },
      //   // 其他三个板块 不显示
      //   // {
      //   //   name: '远程会诊',
      //   //   index: 2,
      //   //   type: 5,
      //   // },
      //   // {
      //   //   name: '图文咨询',
      //   //   index: 3,
      //   //   type: 1,
      //   // },
      //   // {
      //   //   name: '视频咨询',
      //   //   index: 4,
      //   //   type: 2,
      //   // },
      // ],
      // topActive: 1,
      // 0：居家康复，1：居家护理 2：居家生活
      // 视频 不传参数 1：待预约 2：待处理 5：已完成 6：已取消
      // 其他横列表 711-737 不显示
      /* tabList1: [
        {
          name: '全部',
          id: ''
        },
        {
          name: '待接单',
          id: '2'
        },
        {
          name: '待接诊',
          id: '3'
        },
        {
          name: '咨询中',
          id: '4'
        },
        {
          name: '已结束',
          id: '5'
        },
        {
          name: '已退诊',
          id: '6'
        }
      ], */
      // 横向列表3
      // 图文 4:待处理;5:已完成;6:已取消' 全部不传这个参数

      // tabList: [
      //   {
      //     name: '全部',
      //     id: '',
      //   },
      //   {
      //     name: '待接诊',
      //     id: '3',
      //   },
      //   {
      //     name: '咨询中',
      //     id: '4',
      //   },
      //   {
      //     name: '已结束',
      //     id: '5',
      //   },
      //   {
      //     name: '已退诊',
      //     id: '6',
      //   },
      // ],
      // 横列表0,1
      //
      khTabList: [
        // 横列表0,1 康护
        {
          name: '全部',
          id: ''
        },
        {
          name: '待接单',
          id: 2
        },
        {
          name: '待服务',
          id: 31
        },
        {
          name: '服务中',
          id: 32
        },
        {
          name: '待评价',
          id: 4
        },
        {
          name: '已完成',
          id: 5
        },
        {
          name: '已取消',
          id: 6
        }
      ],
      // 横列表0,1 康护列表

      orderList: [],
      active: '',
      nullOrderText: '',
      team_id: this.$route.query.team_id,
      ITEM: [],
      endShow: false,
      jiezhenShow: false,
      closeShow: false,
      juZhenShow: false,
      cancel_reason: '', // 拒绝原因
      isLoading: true,
      yuYueCancelShow: false,
      yuYueconfirmShow: false,
      userid: this.$route.query.userid,
      searchValue: '', // 头部搜索框
      // 居家
      ulList: [
        {
          name: '被服务人：',
          name1: '被服务人：',
          img: require('../../../assets/被服务人员@2x.png'),
          forName: 'PATIENT_NAME'
        },
        {
          name: '预约服务日期：',
          name1: '预约服务日期：',
          img: require('../../../assets/预约时间@2x.png'),
          forName: 'DATE'
        },
        {
          name: '预约服务时间：',
          name1: '预约服务时间：',
          img: require('../../../assets/预约时间@2x.png'),
          forName: 'TIME'
        },
        {
          name: '服务地址：',
          name1: '服务地址：',
          img: require('../../../assets/服务地址@2x.png'),
          forName: 'ADDRESS'
        },
        {
          name: '项目金额：',
          name1: '项目金额：',
          img: require('../../../assets/项目金额@2x.png'),
          forName: 'REAL_AMOUNT'
        },
        {
          name: '预约服务人员：',
          name1: '服务人员：',
          img: require('../../../assets/被服务人员@2x.png'),
          forName: 'STAFF_NAME'
        },
        {
          name: '预约人员：',
          name1: '操作人员：',
          img: require('../../../assets/被服务人员@2x.png'),
          forName: 'USER_NAME'
        },
        {
          name: '操作时间：',
          name1: '操作时间：',
          img: require('../../../assets/预约时间@2x.png'),
          forName: 'ORDER_TIME'
        }
      ],
      // kh
      khJiedanShow: false,
      ORDER_ID: '',
      khJujueShow: false,
      khStartShow: false,
      khEndShow: false
    }
  },
  computed: {
    showNav () {
      return this.$route.query.showNav
    },
    searchVal () {
      return this.$route.query.searchVal
    },
    type () {
      let type = Number(this.$route.query.type)
      let title = ''
      if (type == 3) {
        title = '居家康复'
      } else if (type == 4) {
        title = '居家护理'
      } else if (type == 7) {
        title = '居家生活'
      } else if (type == 8) {
        title = '居家养老'
      }
      document.title = title
      return Number(this.$route.query.type)
    },
    typeTitle () {
      return function (type) {
        let title = ''
        if (type == 3) {
          title = '居家康复'
        } else if (type == 4) {
          title = '居家护理'
        } else if (type == 7) {
          title = '居家生活'
        } else if (type == 8) {
          title = '居家养老'
        }
        document.title = title
        return title
      }
    },
    // 不显示
    typeLabel: function () {
      if (this.type !== 5) {
        return '咨询'
      } else {
        this.$set(this.tabList1[3], 'name', '会诊中')
        return '会诊'
      }
    }
  },
  watch: {
    type (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getOrder()
      }
    },
    searchVal (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getOrder()
      }
    }
  },
  mounted () {
    this.typeTitle(this.type)
    this.getOrder()
    // this.topMenuOnchange()
  },
  methods: {
    khEndConfirm () {
      this.$http
        .endOrderService({ ORDER_ID: this.ORDER_ID })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getOrder()
            this.$toast('操作成功')
            this.khEndShow = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    khEnd (item) {
      this.ORDER_ID = item.ORDER_ID
      this.khEndShow = true
    },
    // 居家康复 护理 开始服务确认
    khStartConfirm () {
      this.$http
        .startOrderService({ ORDER_ID: this.ORDER_ID })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getOrder()
            this.$toast('操作成功')
            this.khStartShow = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 居家康复 护理 开始服务按钮
    khStart (item) {
      this.ORDER_ID = item.ORDER_ID
      this.khStartShow = true
    },
    // 居家 接单确认按钮
    khJiedanConfirm () {
      this.$http
        .acceptorder({ ORDER_ID: this.ORDER_ID })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.khJiedanShow = false
            this.getOrder()
            this.$toast('接单成功')
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 居家康复 护理 接单按钮
    khJiedan (item) {
      this.ORDER_ID = item.ORDER_ID
      this.khJiedanShow = true
    },
    // 居家 拒绝确认
    khJujueConfirm () {
      this.$http
        .rejectorder({ ORDER_ID: this.ORDER_ID })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getOrder()
            this.$toast('您已成功拒绝此单')
            this.khJujueShow = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 居家康复 护理 拒绝按钮
    khJujue (item) {
      this.ORDER_ID = item.ORDER_ID
      this.khJujueShow = true
    },
    // 头部菜单切换  居家或远程..... 不显示
    topMenuOnchange () {
      this.active = 0
      // this.type = Number(this.modelMenu[this.topActive].type)
      this.orderList = []
      this.getOrder()
      // if (Number(this.topActive) === 0 || Number(this.topActive) === 1 || Number(this.topActive) === 2) {
      //   this.getOrder()
      // } else {
      //   this.getTuWenData()
      // }
    },
    onSearch () {
      this.getOrder()
      // if (Number(this.topActive) === 0 || Number(this.topActive) === 1 || Number(this.topActive) === 2) {
      //   this.getOrder()
      // } else {
      //   this.getTuWenData()
      // }
    },
    formatDate (date) {
      var date = new Date(date)
      var hh =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm =
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
        ':'
      var ss =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return hh + mm + ss
    },
    // 取消预约
    yuYueCancelConfirm () {
      if (this.cancel_reason === '' || this.cancel_reason === undefined) {
        Toast('请填写取消预约原因')
        this.yuYueCancelShow = true
        return false
      } else {
        this.$http
          .updateInQuYuYue({
            id: this.ITEM.id,
            cancel_reason: this.cancel_reason
          })
          .then((res) => {
            console.log(res)
            if (res.data.status === 'success') {
              this.getTuWenData()
              this.cancel_reason = ''
              this.yuYueCancelShow = false
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    // 同意预约
    yuYueconfirmConfirm () {
      this.$http
        .updateInYuYue({ id: this.ITEM.id })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            if (this.ITEM.type == 5) {
              this.yuanChengTuandui()
            }
            this.getTuWenData()
            Toast('预约成功')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    yuanChengTuandui () {
      this.$http
        .getInquiryGroup({ id: this.ITEM.id })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            if (sessionStorage.getItem('sys') === 'ANDROID') {
              let obj = {
                id: this.ITEM.id,
                data: res.data.data.list,
                group_id: res.data.data.group_id,
                type: this.ITEM.type
              }
              window.WebViewJavascriptBridge.callHandler(
                'addDoctorGroupChat',
                JSON.stringify(obj),
                function (responseData) {}
              )
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 不显示 医生端
    // 医生 视频 预约确认
    yuYueconfirm (item) {
      // updateInYuYue
      this.ITEM = item
      this.yuYueconfirmShow = true
    },
    // 医生 视频 预约取消
    yuYueCancel (item) {
      // updateInQuYuYue
      this.ITEM = item
      this.yuYueCancelShow = true
    },
    // 医生 图文咨询结束咨询 确认按钮
    closeConfirm () {
      if (this.ITEM.doc_advise !== '' && this.ITEM.doc_advise !== null) {
        this.$http
          .endTuWenZhenDoc({ id: this.ITEM.id })
          .then((res) => {
            console.log(res)
            if (res.data.status === 'success') {
              this.getTuWenData()
              Toast('操作成功，此次' + this.typeLabel + '已结束')
              if (this.type == 5) {
                if (sessionStorage.getItem('sys') === 'ANDROID') {
                  window.WebViewJavascriptBridge.callHandler(
                    'dismissGroup',
                    this.ITEM.im_group_id,
                    function (responseData) {}
                  )
                }
              }
            }
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        sessionStorage.removeItem('doc_advise')
        // /viewWenzhenSuggest
        this.$router.push({
          path: '/viewWenzhenSuggest',
          query: { id: this.ITEM.id, is_advice_edit: this.ITEM.is_advice_edit }
        })
      }
    },
    // 医生 图文咨询结束咨询
    jieshuWenzhen (item) {
      this.ITEM = item
      this.closeShow = true
    },
    // 修改咨询建议
    xiuGai (item) {
      sessionStorage.removeItem('doc_advise')
      // /viewWenzhenSuggest
      this.$router.push({
        path: '/viewWenzhenSuggest',
        query: {
          id: item.id,
          is_advice_edit: item.is_advice_edit,
          type: item.type
        }
      })
    },
    // 点击跳转安卓聊天 继续咨询
    jumpZixun (item) {
      let chatUserId
      let chatName
      if (this.type === 2) {
        if (item.pList.length > 0 && item.pList[0].partake_user_id) {
          chatUserId = item.pList[0].partake_user_id
          chatName = item.pList[0].tuomin_name
        } else {
          chatUserId = item.op_user_id
          chatName = item.name
        }
      }
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler(
          'doctorPatientChat',
          chatUserId + ',' + chatName + ',' + item.type + ',' + item.id,
          function (responseData) {}
        )
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 计算 已会诊时长
    GetDateDiff (mss) {
      if (mss <= 0) {
        mss = 0
      }
      var date = new Date(mss)
      let hour = date.getUTCHours()
      let min = date.getUTCMinutes()
      // if (hour < 10) {
      //   hour = '0' + hour
      // }
      // if (min < 10) {
      //   min = '0' + min
      // }
      if (Number(hour) <= 0) {
        return min + '分钟'
      } else {
        return hour + '小时' + min + '分钟'
      }
      // return hour + '小时' + min + '分钟'
    },
    // 医生端 图文退诊
    jujueConfirm () {
      if (this.cancel_reason === '') {
        Toast('请填写退诊原因')
        this.juZhenShow = true
        return false
      } else {
        this.$http
          .doctorNoJieZhen({
            id: this.ITEM.id,
            cancel_reason: this.cancel_reason
          })
          .then((res) => {
            console.log(res)
            if (res.data.status === 'success') {
              Toast('退诊成功')
              this.getTuWenData()
              this.cancel_reason = ''
              this.juZhenShow = false
              if (this.type == 5) {
                if (sessionStorage.getItem('sys') === 'ANDROID') {
                  window.WebViewJavascriptBridge.callHandler(
                    'dismissGroup',
                    this.ITEM.im_group_id,
                    function (responseData) {}
                  )
                }
              }
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    // 医生端 图文退诊
    juZhen (item) {
      this.ITEM = item
      this.juZhenShow = true
      // cancel_reason 拒绝诊断理由
    },
    // 接诊确认按钮
    jiezhenConfirm () {
      this.$http
        .doctorJieZhen({ id: this.ITEM.id })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getTuWenData()
            Toast('接诊成功')
            // 清空指定对象的聊天信息  clearChatMessage
            // 参数：指定对象的userid（患者id）   生成订单执行
            if (sessionStorage.getItem('sys') === 'ANDROID') {
              window.WebViewJavascriptBridge.callHandler(
                'clearChatMessage',
                this.ITEM.op_user_id,
                function (responseData) {}
              )
            }
            this.jumpZixun(this.ITEM)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 医生端 图文接诊 红色医生订单 不显示
    jieZhen (item) {
      this.ITEM = item
      this.jiezhenShow = true
    },
    // 查看咨询过程 红色医生订单 不显示
    guoCheng (item) {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler(
          'consultChatHistory',
          item.id,
          function (responseData) {}
        )
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 红色医生订单 点击查看详情  不显示
    clickBox (data) {
      if (data.status == 3 && data.type == 2 && data.is_signin == 0) {
        sessionStorage.setItem('order', JSON.stringify(data))
        // isDoctor 0否 1是  仅用于订单详情页面
        this.$router.push({
          path: '/tuWenOrder',
          query: {
            id: data.id,
            isDoctor: 1,
            userid: this.userid,
            type: this.type
          }
        })
      } else if (data.status == 3) {
        // 待接诊
        if (sessionStorage.getItem('sys') === 'ANDROID') {
          if (data.type == 5) {
            window.WebViewJavascriptBridge.callHandler(
              'startGroupPageChat',
              data.id + ',' + data.im_group_id,
              function (responseData) {}
            )
          } else {
            window.WebViewJavascriptBridge.callHandler(
              'goToJiezhen',
              data.id,
              function (responseData) {}
            )
          }
        } else {
          Toast('请在App上使用本功能')
        }
      } else if (data.status == 4) {
        // 咨询中
        if (data.type == 5) {
          window.WebViewJavascriptBridge.callHandler(
            'startGroupPageChat',
            data.id + ',' + data.im_group_id,
            function (responseData) {}
          )
        } else {
          this.jumpZixun(data)
        }
      } else {
        sessionStorage.setItem('order', JSON.stringify(data))
        // isDoctor 0否 1是  仅用于订单详情页面
        this.$router.push({
          path: '/tuWenOrder',
          query: {
            id: data.id,
            isDoctor: 1,
            userid: this.userid,
            type: this.type
          }
        })
      }
    },
    // 获取图文列表数据  红色医生订单 不显示
    getTuWenData () {
      this.isLoading = true
      var params
      if (!this.active) {
        params = {
          type: this.type,
          team_id: this.team_id,
          name: this.searchValue
        }
      } else {
        params = {
          status: this.active,
          type: this.type,
          team_id: this.team_id,
          name: this.searchValue
        }
      }
      // params.team_id = this.team_id
      this.$http
        .findDocAllInquiryTuWen(params)
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.orderList = res.data.data
            this.isLoading = false
            if (this.active === '') {
              this.nullOrderText = '暂无任何订单哦'
            } else if (Number(this.active) === 2) {
              this.nullOrderText = '暂无待接单订单哦'
            } else if (Number(this.active) === 3) {
              this.nullOrderText = '暂无待接诊订单哦'
            } else if (Number(this.active) === 4) {
              this.nullOrderText = '暂无' + this.typeLabel + '中订单哦'
            } else if (Number(this.active) === 5) {
              this.nullOrderText = '暂无已结束订单哦'
            } else if (Number(this.active) === 6) {
              this.nullOrderText = '暂无已退诊订单哦'
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onClick () {},
    // 点击不同康复 护理 不显示
    onchange () {
      this.orderList = []
      this.getOrder()
      // if (this.topActive == 0 || this.topActive == 1 || this.topActive == 2) {
      //   this.getOrder()
      // } else {
      //   this.getTuWenData()
      // }
    },
    // 获取各个状态下的订单 kh
    getOrder () {
      this.orderList = []
      let val = ''
      if (this.searchVal) {
        val = this.searchVal // 头部浏览器取的参数
      } else {
        val = this.searchValue
      }
      this.isLoading = true
      this.$http.getorders({
        KEY: val,
        MARK: this.active,
        TYPE: this.type,
        team_id: this.team_id
      })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            console.log(this.active)
            this.orderList = res.data.data
            this.isLoading = false
            if (Number(this.active) === 0) {
              this.nullOrderText = '暂无任何订单哦'
            } else if (Number(this.active) === 1) {
              this.nullOrderText = '暂无待支付订单哦'
            } else if (Number(this.active) === 2) {
              this.nullOrderText = '暂无待接单订单哦'
            } else if (Number(this.active) === 31) {
              this.nullOrderText = '暂无待服务订单哦'
            } else if (Number(this.active) === 32) {
              this.nullOrderText = '暂无服务中订单哦'
            } else if (Number(this.active) === 4) {
              this.nullOrderText = '暂无待评价订单哦'
            } else if (Number(this.active) === 5) {
              this.nullOrderText = '暂无已完成订单哦'
            } else if (Number(this.active) === 6) {
              this.nullOrderText = '暂无已取消订单哦'
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 返回
    back () {
      // this.$router.push({path: '/'})
      this.$router.history.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-search {
  width: 80%;
}
.all {
  width: 100%;
  height: 100%;
  background: #faf9fe;
  font-family: PingFang SC;
  overflow: auto;
}
.header {
  width: 100%;
  height: 12vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  position: fixed;
  top: 0;
  z-index: 9999;
  /*border-bottom: 1px solid #E5E5E5;*/
  overflow: hidden;
}
.fanhui {
  display: flex;
  align-items: center;
  margin-left: 15px;
  color: #1da4f2;
}
.fanhui img {
  width: 7px;
  height: 13px;
  margin-right: 5px;
}
.sides {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
}
/* 1465-1519 蓝色标签 */
.menu {
  width: 100%;
  height: 12vw;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  overflow-x: auto;
  background: white;
  /*margin-bottom: 5px;*/
  position: sticky;
  top: 12vw;
  z-index: 9999;
}
.menu::-webkit-scrollbar {
  display: none;
}
.menu ul {
  width: auto;
  /*width: 98%; !* 可注释*!*/
  height: 29px;
  display: flex;
  align-items: center;
  /*margin-right: 20px;*/
}
.menu ul li:first-child {
  border-radius: 5px 0 0 5px;
}
/*.menu ul li:nth-child(2){ !* 可注释*!*/
/*  border-radius: 0px 5px 5px 0px;*/
/*}*/
.menu ul li:last-child {
  border-radius: 0px 5px 5px 0px;
  margin-right: 20px;
}
.menu ul li {
  min-width: 80px;
  /*width:80px;*/
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1da4f2;
  background: rgba(29, 164, 242, 0.1);
}
.select {
  color: white !important;
  background: #1da4f2 !important;
}

/*康复 1519-1593*/
.KHbox {
  padding: 10px !important;
  box-sizing: border-box;
}
.orderTop {
  height: 60px;
  font-size: 15px;
  /*font-weight: bold;*/
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.orderLeft {
  display: flex;
  align-items: center;
}
.orderUl {
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.orderUl li {
  display: flex;
  align-items: center;
  height: 30px;
}
.typeName {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #1da4f2;
  border-radius: 50%;
  margin-right: 8px;
}
.statusSpan {
  color: #1da4f2;
  display: flex;
}
.tubiao {
  width: 15px;
  height: 15px;
  margin-right: 8px;
}
.orderBottom {
  height: 44px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.orderBottom button {
  width: 90px;
  height: 29px;
  border: 1px solid #e3170d;
  border-radius: 14px;
  background: transparent;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #e3170d;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blue {
  color: #1da4f2 !important;
  border-color: #1da4f2 !important;
}
/*康复结束*/

/* 远程开始*/

.KHbox,
.box {
  width: 95%;
  border-radius: 10px;
  padding: 10px 0;
  box-sizing: border-box;
  background: white;
  margin: 10px auto auto auto;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05);
}
.content .box:last-child {
  margin-bottom: 30px !important;
}
.boxTop,
boxBottom {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.photo {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  object-fit: cover;
}
.boxTop {
  justify-content: space-between;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
}
.boxTop_left {
  /*width: 80%;*/
  height: 100%;
  display: flex;
  align-items: center;
}
.boxTop_left span {
  display: flex;
}
.boxTop_right {
  font-size: 15px;
}
.boxContent {
  min-height: 50px;
  /*background: rgba(250, 249, 254, 1);*/
  box-sizing: border-box;
  overflow: hidden;
  border-top: 1px solid #e5e5e5;
  padding: 10px;
  box-sizing: border-box;
}
.boxContent_text {
  width: 100%;
  /*height: 100%;*/
  font-size: 15px;
  display: flex;
}
.boxContent_text p {
  width: 100%;
  line-height: 1.8;
  /*// 单行*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
}
.boxContent_bottom {
  display: flex;
  /*height: 44px;*/
  /*min-height: 44px;*/
  align-items: center;
  justify-content: space-between;
  font-size: 15px;

  padding: 5px 10px 5px 10px;
  box-sizing: border-box;
}
.boxContent_bottom p {
  line-height: 1.7;
  /*margin-bottom: 3px;*/
}
.price {
  min-height: 40px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /*justify-content: flex-end;*/
  border-bottom: 1px solid #e5e5e5;
  /*border-top: 1px solid #E5E5E5;*/
}
.price span:nth-child(2) {
  font-weight: bold;
}
.boxBottom {
  height: 35px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.boxBottom .qianDao {
  height: 100%;
  display: flex;
  align-items: center;
  /*position: fixed;*/
  /*left: 30px;*/
}
.qianDao img {
  margin-right: 8px;
}
.box_button {
  min-width: 75px;
  /*width: 75px;*/
  height: 29px;
  border-radius: 5px;
  background: white;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  font-family: 'PingFang SC';
  margin-left: 10px;
  padding: 0 5px;
  box-sizing: border-box;
}
.colorGary {
  color: #999999;
}
.btnGary {
  border: 1px solid #e5e5e5;
  color: #999;
}
.btnRed {
  color: #e3170d;
  border: 1px solid #e3170d;
}
.btnBlack {
  color: #333;
  border: 1px solid #999;
}
.red {
  color: rgba(227, 23, 13, 1);
}
.blue {
  color: #1da4f2;
}
.black {
  color: #333333;
}
.btnBule {
  color: #1da4f2;
  border: 1px solid #1da4f2;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
}
/deep/ .van-overlay {
  z-index: 999;
}
.block {
  width: 90%;
  height: 80%;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
}
.xuzhiTop {
  width: 100%;
  height: 44px;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e5e5;
}
.xuzhiContent {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  height: 75%;
  overflow: auto;
}
.xuzhiContent ul li {
  margin-bottom: 10px;
  font-size: 13px;
  color: #333333;
}
.select {
  width: 100%;
  height: 30px;
  font-size: 11px;
  color: #1da4f2;
  display: flex;
}
.select img {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  margin-right: 5px;
}
.next {
  width: 100%;
  height: 44px;
  color: #1da4f2;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e5e5;
}
.bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.blue {
  color: #1da4f2;
}
.green {
  color: rgba(46, 196, 155, 1);
}
.juZhenInp {
  width: 90%;
  height: 130px;
  background: #faf9fe;
  border-radius: 5px;
  margin: 10px 5%;
  padding: 10px;
  box-sizing: border-box;
  font-size: 15px;
  border: none;
  resize: none;
}
/deep/ .juzhen .van-dialog__header {
  padding: 10px 0;
  box-sizing: border-box;
  /* padding-top: 18px; */
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
/deep/ .van-tab {
  font-size: 15px;
}
/*远程结束*/
.tagTuandui {
  font-size: 11px;
  min-height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #f9bd77, #ffed91);
  border-radius: 19px;
  border: none;
  color: #a8610b;
  margin-left: 10px;
}
</style>
a
